import React, { Component } from 'react'
import TabControl from './TabControl/TabControl'

export class App extends Component {
  constructor() {
    super()

    this.state = {
      titles: ['流行', '新款', '折扣'],
      tabIndex: 0
    }
  }

  changeTab(tabIndex) {
    this.setState({ tabIndex })
  }

  getTabItem(item) {
    if(item == '流行') {
      return <span>{item}</span>
    } else if(item == '新款') {
      return <button>{item}</button>
    } else {
      return <i>{item}</i>
    }
  }
  
  render() {
    const { titles, tabIndex } = this.state
    return (
      <div>
        <TabControl 
          titles={titles} 
          changeTab={(index) => this.changeTab(index)}
          // itemType={item => <button>{item}</button>}
          itemType={item => this.getTabItem(item)}
        ></TabControl>
        <div>{titles[tabIndex]}</div>
      </div>
    )
  }
}

export default App